<script setup lang="ts">
import List from "@/layouts/List.vue";
import {computed, onMounted, reactive, ref} from "vue";
import {showFailToast, showSuccessToast, showToast} from "vant";
import myAxios from "@/plugins/myAxios.ts";
import type {userType} from "@/model/user";
import cardAxios from "@/plugins/cardAxios.ts";
import {useRouter} from "vue-router";
const show = ref(false);
const router = useRouter();
const state = reactive({
  show: false,
  cardList: [] as userType[],
  formattedDate: '',
});
const onClickLeft = () => {
  show.value = true;
};
const handleConfirm = async () => {
  try {
    const res = await cardAxios.get('/lose');
// @ts-ignore
    if (res?.code === 40100 || res.data == null) {
      showFailToast('未登录');
      router.push({
        path: '/login-l',
        replace: true,
      });
      // @ts-ignore
    } else if (res?.code === 200 && res.data) {
      showSuccessToast('发布成功');
      router.replace('/');
    } else {
      showFailToast('校园卡卡号或其他信息不完整');
    }
  } catch (error:any) {
    // Check if it's a server internal error (status code 500)
    if (error.response && error.response.status === 500) {
      router.push({
        path: '/code',
        replace: true,
      });
      showFailToast('校园卡卡号或其他信息不完整');
    } else {
      showFailToast('校园卡卡号或其他信息不完整');
    }
  }
};

const currentDateTime = ref(new Date());
onMounted(() => {
  // 页面加载时获取一次时间
  currentDateTime.value = new Date();
});

const formattedDateTime = computed(() => {
  const year = currentDateTime.value.getFullYear();
  const month = currentDateTime.value.getMonth() + 1; // 月份从0开始，所以要加1
  const day = currentDateTime.value.getDate();
  const hour = currentDateTime.value.getHours();
  const minute = currentDateTime.value.getMinutes();
  const second = currentDateTime.value.getSeconds();

  return `${year}年${month}月${day}日 ${hour}点${minute}分${second}秒`;
});

const confirmButtonColor = ref('#F9752D');
const cancelButtonColor = ref('black');
</script>

<template>
  <div class="index-top"><img src="../../public/gbz.png" alt="校卡帮"></div>
  <div class="index-header">
    <div class="list-style">
      <List/>
    </div>
  </div>
  <div class="index-header-date">
    最新数据截止:{{formattedDateTime}}
  </div>
  <div class="index-center">
    <van-row gutter="20">
      <van-col span="12">
          <van-button round size="large" color="#FF625A" @click="onClickLeft">发布丢失</van-button>
      </van-col>
      <van-col span="12">
        <router-link to="/search">
          <van-button round size="large" color="#FCC70E">寻找失主</van-button>
        </router-link>
      </van-col>
    </van-row>
  </div>
  <div class="index-bottom"></div>
  <van-dialog v-model:show="show" title="发布我的丢失" show-cancel-button @confirm="handleConfirm" :confirm-button-color="confirmButtonColor" :cancel-button-color="cancelButtonColor">
    <div style="text-align: left;padding: 10px">
      <p style="text-align: center">我的校园卡将设置为丢失模式</p>
      <p><van-divider  :style="{ color: '#F9752D', borderColor: '#F9752D', padding: '0 16px' }">注意</van-divider></p>
      <p>（一）确保校园卡尾号填写真实正确</p>
      <p>（二）完善的校园卡信息可以提高匹配率</p>
      <p>（三）该模式会持续检索可能的拾卡用户</p>
      <p>（四）有拾卡者信息会第一时间通知您</p>
      <p>（五）最近请留意[我]-[拾卡者]的更新信息</p>
      <p>（六）校园卡15天后自动关闭丢失模式</p>
    </div>
  </van-dialog>
</template>


<style scoped>
.index-header-date{
  margin-left:20px;
  margin-right:20px;
}
.index-header {
  border: 2px solid #FCDEC5; /* 边框宽度、样式和颜色 */
  border-radius: 10px; /* 调整此值来设置圆角的大小 */
  height: 300px;
  margin-bottom: 5px;
}
.index-header-date{
  text-align: center;
  font-size: 13px;
  color: #C3C3C3;
}
.list-style {
  max-height: 255px; /* Set the maximum height as needed */
  overflow-y: auto; /* Enable vertical scrolling */
}

.index-top {
  text-align: center;
}
.index-center{
  margin-top: 20px;
}
.index-top img {
  width: 200px;
}
</style>